<template>
    <div id="category-box">
         <!-- 搜素列表框 -->
        <ul class="search-list">
            <li class="search-list-item" v-for="(item,index) in brindList" 
              :key="item.titleId">
                <p  @click="gethidelist($event)" :id="item.titleId">
                    <b>{{item.title}}</b><i></i>
                </p>
                <div class="hideshow" v-show="changeclass==index" :id="item.titleId">
                    <ul class="hide-datil-item">
                        <router-link 
                         :to="{path:'/productlist',query:{categoryid:item.categoryId,pageid:1,category:item.category}}" 
                        tag="li" class="hide-list-item" v-for="(item,index) in categroylist" :id="item.categoryId" :key="item.categoryId">
                            {{item.category}}
                        </router-link>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
    export default{
        name:"Categroy",
        data(){
            return {
                brindList:[],
                categroylist:[],
                changeclass:'',
            }
        },
        mounted(){
            this.getBrindList();
        },
        methods:{
            getBrindList(){
                axios({
                    url:'http://localhost:3000/api/getcategorytitle',
                    method:"get"
                }).then(res=>{
                    this.brindList=res.data.result;
                    console.log(res)
                })
            },
            // 根据分类的标题获取标题对应的分类列表
            getcategorylist(titleid){
                axios({
                    url:'http://localhost:3000/api/getcategory',
                    method:"get",
                    params:{
                        titleid:titleid
                    }
                }).then(res=>{
                    console.log(res)
                    this.categroylist=res.data.result;
                })
            },
            // 点击品牌列表展示隐藏列表
            gethidelist(el){
            var titleid = event.currentTarget.id;
            this.changeclass=titleid;
           console.log(this.changeclass);
           this.getcategorylist(titleid);
            }
        }
    }
</script>
<style scoped>
    #category-box{
        width: 100%;
    }
    .search-list {
  width: 100%;
  background: #d3cece;
  border-radius: 10px;
}
.search-list .search-list-item {
  width: 100%;
  color: #000;
  font-size: 16px;
  border-bottom: 1px solid #555353;
  font-weight: 700;
  padding:10px 0;
}
.search-list .search-list-item p {
  display: flex;
  justify-content: space-around;
}
.search-list .search-list-item p b {
  flex: 1;
  display: block;
}
.search-list .search-list-item p i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin-right: 10px;
  margin-top: 5px;
  background: url("../../../static/images/header_app.png") no-repeat center center;
    background-color:rgb(22, 232, 240); 
  background-size: 20px 20px;
  color: white;
}
.search-list .search-list-item .hideshow {
  /* display: none; */
  width: 100%;
}
.search-list .search-list-item .hideshow .hide-datil-item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-top: 10px;
}
.search-list .search-list-item .hideshow .hide-datil-item .hide-list-item {
  width: 33%;
  text-align: center;
  font-size: 16px;
  color: #5a5757;
  font-weight: 500;
  border-right: 1px solid #0ef052;
  border-top: 1px solid #0ef052;
  border-bottom: 1px solid #0ef052;
}
</style>